<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Signature 签名板"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-signature
        ref="signature1"
        :width="width"
        :height="height"
      />
      <div class="flex-btn">
        <hips-button
          type="primary"
          @click="clickBtn('clear')"
        >
          clear
        </hips-button>
        <hips-button
          type="primary"
          @click="clickBtn('undo')"
        >
          undo
        </hips-button>
        <hips-button
          type="primary"
          @click="clickBtn('save')"
        >
          save
        </hips-button>
        <hips-button
          type="primary"
          @click="clickBtn('resize')"
        >
          resize
        </hips-button>
      </div>
    </demo-block>

    <demo-block title="设置默认内容">
      <hips-signature
        ref="signature2"
        :height="'200px'"
        :default-url="defaultUrl"
        :options="options1"
      />
      <hips-button
        type="primary"
        @click="$refs.signature2.clear()"
      >
        clear
      </hips-button>
    </demo-block>

    <demo-block title="设置水印">
      <hips-signature
        ref="signature3"
        :height="'200px'"
        :water-mark="waterMark1"
      />
      <hips-button
        type="primary"
        @click="$refs.signature3.clear()"
      >
        clear
      </hips-button>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Signature, Button } from '@hips/vue-ui';

export default {
  components: {
    [Signature.name]: Signature,
    [Button.name]: Button,
  },
  mixins: [ BasicView ],
  data() {
    return {
      options1: {
        backgroundColor: 'black',
        penColor: 'yellow',
      },
      width: '100%',
      height: '100%',
      defaultUrl: '',
      waterMark: {
        text: 'hips签名板组件',
        fillStyle: '#eee',
      },
    };
  },
  computed: {
    waterMark1() {
      return {
        ...this.waterMark,
        text: 'hips签名板组件',
      };
    },
  },

  methods: {
    clickBtn(type) {
      switch (type) {
        case 'clear':
          this.$refs.signature1.clear();
          break;
        case 'save':
          let png = this.$refs.signature1.save(); // eslint-disable-line
          let jpeg = this.$refs.signature1.save('image/jpeg'); // eslint-disable-line
          let svg = this.$refs.signature1.save('image/svg+xml'); // eslint-disable-line
          console.log(png);
          console.log(jpeg);
          console.log(svg);
          this.defaultUrl = png;
          break;
        case 'undo':
          this.$refs.signature1.undo();
          break;
        case 'resize':
          this.height = '400px';
          this.$refs.signature1.$emit('hips-signature:resize');
          break;
      }
    },
  },
};
</script>

<style lang="stylus">
.flex-btn {
  display: flex;
  justify-content: space-between;
}

button {
  margin: 10px;
}
</style>
